import { ModalForm, ProFormInstance, ProFormText } from '@ant-design/pro-components';
import { useAsyncEffect } from 'ahooks';
import { useRef, useState } from 'react';

const Modal = () => {
  const [visible, setVisible] = useState<boolean>(true);
  const formRef = useRef<ProFormInstance>(null);

  const formItemLayout = {
    labelCol: { span: 8 },
  };

  const onFinish = async (values: any) => {
    console.log(values);
    setVisible(false);
  };

  useAsyncEffect(async () => {
    formRef.current?.setFieldsValue({
      time: '2023.03.20 14:00 - 2023.03.21 14:00',
      roomType: '双人房',
      roomNo: '201 (双人房)',
      realName: '张三',
      phone: '13800000000',
    });
  }, []);

  return (
    <ModalForm
      {...formItemLayout}
      layout={'vertical'}
      formRef={formRef}
      open={visible}
      title={'客人卡'}
      readonly
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setVisible(false);
        },
      }}
      submitter={{
        // 配置按钮的属性
        resetButtonProps: {
          style: {
            // 隐藏重置按钮
            display: 'none',
          },
        },
        submitButtonProps: {},
      }}
      submitTimeout={2000}
      onFinish={onFinish}
      width={'600px'}
    >
      <div style={{ marginTop: '40px' }}></div>
      <ProFormText
        width="md"
        name="time"
        label={<h4 style={{ fontWeight: 'bold' }}>入住/离店时间：</h4>}
      />
      <ProFormText
        width="md"
        name="roomNo"
        label={<h4 style={{ fontWeight: 'bold' }}>房号：</h4>}
      />
      <ProFormText
        width="md"
        name="realName"
        label={<h4 style={{ fontWeight: 'bold' }}>入住人：</h4>}
      />
      <ProFormText
        width="md"
        name="phone"
        label={<h4 style={{ fontWeight: 'bold' }}>手机号：</h4>}
      />
    </ModalForm>
  );
};

export default Modal;
